@charset "utf-8";
@rem:75rem;

body{
    background-color: #feefab;
}

#wrap {
    margin-top: -1/@rem;
    height: 1335/@rem;
    background-image: url("../image/bg.png");
}

.rule, .my {
    position: relative;
    z-index: 3;
    margin-top: 36/@rem;
    width: 82/@rem;
    height: 56/@rem;
    background-color: #ff9d1b;
    text-align: center;
    line-height: 56/@rem;
    font-size: 24/@rem;
    color: #fff;
}

.rule {
    border-top-right-radius: 10/@rem;
    border-bottom-right-radius: 10/@rem;
}

.my {
    background-color: #fe5362;
    border-top-left-radius: 10/@rem;
    border-bottom-left-radius: 10/@rem;
}

/*游戏区域*/
.main{
    position: relative;
    width: 100%;
    height: 974/@rem;
}

.main .caidai{
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 3;
    margin-left: -322/@rem;
    width: 644/@rem;
    height: 873/@rem;
    background-image: url("../image/caidai.png");
}

.main .title{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 314/@rem;
    background-image: url("../image/title.png");
}

.main .box{
    position: relative;
    margin-top: -120/@rem;
    width: 100%;
    height: 782/@rem;
    background-image: url("../image/box.png");
}

/*钩子*/
.main .box #hook{
    position: absolute;
    left: 50%;
    top: -220/@rem;
    z-index: 1;
    margin-left: -65/@rem;
    width: 130/@rem;
    height: 430/@rem;
}

#hook .line{
    margin: auto;
    width: 44/@rem;
    height: 342/@rem;
    background-image: url("../image/line.png");
}

#hook .left,#hook .right{
    position: absolute;
    bottom: 0;
    width: 56/@rem;
    height: 101/@rem;
}

#hook .left{
    left: 0;
    background-image: url("../image/left.png");
    -o-transform-origin: right top;
    -ms-transform-origin: right top;
    -moz-transform-origin: right top;
    -webkit-transform-origin: right top;
    transform-origin: right top;
    transform: rotate(-20deg);
}

#hook .right{
    right: 0;
    background-image: url("../image/right.png");
    -o-transform-origin: left top;
    -ms-transform-origin: left top;
    -moz-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

#hook .up{
    -o-animation: up .5s linear forwards;
    -ms-animation: up .5s linear forwards;
    -moz-animation: up .5s linear forwards;
    -webkit-animation: up .5s linear forwards;
    animation: up .5s linear forwards;
}

@keyframes up{
    100%{
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/*传送带*/
.behind,.front{
    overflow-x: hidden;
    position: relative;
    left: 50%;
    top: 32%;
    margin: -86/@rem 0 0 -310/@rem;
    width: 620/@rem;
    height: 150/@rem;
    background-image: url("../image/behind.png");
    background-position: left bottom;
}

.front{
    top: 43%;
    width: 620/@rem;
    height: 215/@rem;
    background-image: url("../image/front.png");
}

.behind ul,.front ul{
    width: 14rem;
}

.front ul{
    position: absolute;
    right: 0;
}

.behind li{
    position: relative;
    float: left;
    height: 105/@rem;
}

.front li{
    position: relative;
    float: right;
    height: 156/@rem;
}

.behind img{
    position: absolute;
    width: 91/@rem;
    height: 102/@rem;
}

.front img{
    position: absolute;
    right: 0;
    width: 139/@rem;
    height: 156/@rem;
}

.box h3{
    margin: 355/@rem auto 18/@rem;
    width: 286/@rem;
    height: 52/@rem;
    background-color: #ff9d1b;
    text-align: center;
    line-height: 52/@rem;
    font-size: 20/@rem;
    font-weight: normal;
    color: #bc5700;
    border-radius: 26/@rem;
}

/*按钮区域*/
.box-btn{
    width: 100%;
    height: 139/@rem;
}

.box-btn li{
    float: left;
}

.box-btn li:nth-child(1){
    width: 157/@rem;
    height: 139/@rem;
    background-image: url("../image/coin1.png");
    -o-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -o-animation: shak 3s ease-in-out infinite alternate;
    -ms-animation: shak 3s ease-in-out infinite alternate;
    -moz-animation: shak 3s ease-in-out infinite alternate;
    -webkit-animation: shak 3s ease-in-out infinite alternate;
    animation: shak 3s ease-in-out infinite alternate;
}

@keyframes shak{
    0%,100%{
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20%,60%{
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    40%,80%{
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
}

.box-btn li:nth-child(2){
    margin: 0 60/@rem;
    width: 306/@rem;
    height: 103/@rem;
    background-image: url("../image/start.png");
}

.box-btn li:nth-child(3){
    width: 165/@rem;
    height: 125/@rem;
    background-image: url("../image/coin2.png");
}

/*奖品展示*/
.awards {
    position: static;
    margin: 96/@rem auto;
    width: 690/@rem;
    height: 222/@rem;
    background-image: url("../image/rect.png");
}

.awards .swiper-container{
    overflow: hidden;
    margin: 16/@rem auto;
    padding: 22/@rem 0;
    width: 658/@rem;
    height: 146/@rem;
    background-color: #f5ae4f;
    box-shadow: 0 20/@rem 20/@rem rgba(248, 131, 23, .7) inset;
    border-radius: 16/@rem;
}

/*规则弹窗背景色*/
#mask-rule .box-rule{
    background-color: #fe5c51;
}

#mask-rule .box-rule .star{
    background-image: url("../../common/image/rule/star2.png");
}


